Question Loading...

Accidental Global Variables: Assigning a value to an undeclared variable (or using this incorrectly) attaches it to the global object, where it remains reachable forever .

Forgotten Event Listeners: Adding event listeners without removing them keeps references to DOM elements and any variables captured in the callback's closure .

Detached DOM Elements: Holding references to DOM nodes that have been removed from the page prevents their memory from being reclaimed .

Closures Capturing Large Objects: Inner functions that close over variables keep those variables alive as long as the function exists, even if the variable isn't used .

Timers and Intervals: setInterval callbacks and any variables they reference remain alive until the timer is cleared with clearInterval .

Caches Without Eviction Policies: Growing caches indefinitely without limits or expiration policies can consume all available memory over time .

Circular References: While modern GC handles cycles, circular references combined with other patterns (like event listeners) can still cause leaks .

Performance Tab - Memory Timeline: Record a performance profile with memory checked. Watch for sawtooth patterns (GC collections) where the baseline creeps upward over time—this indicates memory not being fully reclaimed .

Memory Tab - Heap Snapshots: Take a heap snapshot, perform actions that might leak, take another snapshot, and compare. Look for objects that should have been freed but remain, especially detached DOM elements and unexpected retained objects .

Allocation Profiler: Records allocations over time, showing which functions are creating objects that persist. Particularly useful for identifying frequent allocations in unexpected places .

Detached Elements Tool: Chrome's Memory tab can specifically identify DOM nodes that are no longer in the document but remain in memory due to JavaScript references .

process.memoryUsage(): Basic monitoring of heap usage over time. Write a script that logs heapUsed every few seconds. A steady increase without plateaus suggests a leak .

--trace-gc Flag: Run Node with --trace-gc to see garbage collection events. After each GC, check if memory returns to expected baseline levels .

Heap Snapshots with v8: Use v8.getHeapSnapshot() to programmatically generate snapshots, or the --heapsnapshot-signal flag to take snapshots on demand .

Chrome DevTools for Node: Use node --inspect and open Chrome DevTools to get the full suite of memory analysis tools for Node.js processes .

Clinic.js: A Node.js performance toolkit with Doctor (automated detection) and Bubbleprof (async analysis) that can help identify memory issues .

Puppeteer for Browser Leaks: Write tests that repeatedly perform actions and measure memory before/after GC. A leak test might look for memory growth beyond a threshold after many iterations .

Memlab: Facebook's open-source E2E memory leak detection framework. It automates heap diffing and can be integrated into CI pipelines .

Jest with --logHeapUsage: In Node.js testing, track heap usage across test runs to spot trends .

Leakage Detection Patterns: In CI, fail builds if memory usage increases by more than a certain percentage after repeated operations .

Global Object: Variables attached to window or global persist forever. Look for accidental globals or libraries that attach to global .

Closures: In heap snapshots, examine the "retainers" view to see which function closure is holding an object. Look for unexpected captured variables .

Event Listeners: Check for listeners attached to DOM elements that still reference them. Chrome DevTools shows event listeners in the "Event Listeners" panel .

Timers: Active setInterval or setTimeout callbacks keep their scope alive. Ensure timers are cleared when no longer needed .

Detached DOM Trees: Elements removed from the DOM but still referenced by JavaScript objects appear as "Detached" in snapshots .